<template>
	<view class="search">
		<view class="tfiexd">
			<view class="search-contariner">
				<input v-model="searchValue" placeholder="搜索" class="search-input" @input="onSearchInput"
					@confirm="onSearchConfirm" />
				<uni-icons type="search" size="23" color="#bbb" class="search-icon"></uni-icons>
				<view class="search-btn" @click="onChangeSearch()">搜索</view>
			</view>
		</view>
		<view style="height: 90rpx;"></view>
		<!-- 列表 -->
		<view class="parknews" v-for="(item, index) in parknewsList" :key="index" @click="SharedWorkers(item.src)">
			<!-- <text class="dot"></text> -->
			<view class="parknews-left">
				<view class="parknews-leftt">
					<text class="parknews-left-title">{{ item.title }}</text>
				</view>
				<view class="parknews-left-time">{{ $getRelativeTimes(item.createTime) }}</view>
			</view>
			<!-- <view class="parknews-right"> -->
				<image :src="item.filePath" lazy-load="true" mode="scaleToFill" class="parknews-right" />
			<!-- </view> -->
		</view>
		
	</view>
</template>

<script>
	import {
		getOaNewsAll
	} from "@/proxy/asset/admin.api.js";
	export default {
		data() {
			return {
				searchValue: "", // 用 data 定义响应式的 searchValue
				parknewsList:[]
			};
		},
		methods: {
			// 点击园区快讯
			// SharedWorkers(id) {
			// 	console.log("跳转园区快讯详情",id)
			// 	uni.navigateTo({
			// 		url: "/pagesParkarea/parkarea/details?id=" + id
			// 	});
			// },
			SharedWorkers(src) {
				console.log("跳转园区快讯详情", src)
				uni.navigateTo({
					url: "/pagesParkarea/parkarea/details?url=" + src,
				});
			},
			// 输入框内容变化时触发
			onSearchInput(e) {
				console.log(e);
			},
			// 确认键（回车）触发
			onSearchConfirm(e) {
				console.log(e);
			},
			// 点击按钮或其他方式触发
			async onChangeSearch() {
				try {
					const result = await getOaNewsAll({
						params: {
							keywords: this.searchValue
						}
					});
					if (result.code == 200) {
						this.parknewsList = result.rows;
						console.log("获取新闻列表", result)
					} else {
						toast({
							title: result.data.msg,
						});
					}
				} catch (err) {
					toast({
						icon: 'none',
						title: '发起失败，请联系管理员！',
						duration: 2000
					})
					console.log(err);
				}
			}
		},
		mounted() {
			console.log("组件已加载");
		}
	};
</script>

<style lang="scss">
	.search {
		.tfiexd{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			background: #fff;
			.search-contariner {
				display: flex;
				align-content: center;
				padding: 10rpx 20rpx;
				justify-content: space-between;
				position: relative;
				.search-input {
					flex: 1;
					height: 70rpx;
					border-radius: 40rpx;
					background: #f1f1f1;
					padding-left: 70rpx;
					font-size: 30rpx;
				}
			
				.search-icon {
					position: absolute;
					left: 40rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			
				.search-btn {
					width: 90rpx;
					text-align: center;
					font-size: 30rpx;
					height: 70rpx;
					line-height: 70rpx;
				}
			}
		}
		
		.parknews {
			padding: 30rpx 20rpx;
			margin: 0 15rpx;
			display: flex;
			// align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			border-bottom: 2rpx solid #ddd;
			// position: relative;
			// border-left: 2rpx solid #ddd;
			// border-radius: 10rpx;
		
			// 时间轴
			// .dot {
			// 	display: block;
			// 	width: 15rpx;
			// 	height: 15rpx;
			// 	background-color: #fff;
			// 	border: 6rpx solid #0081ff;
			// 	border-radius: 50%;
			// 	position: absolute;
			// 	top: 50%;
			// 	/* margin-top: -7px; */
			// 	left: -13rpx;
			// 	transform: translateY(-50%);
			// }
		
			// 箭头
			// .jiantou{
			// 	width: 0;
			// 	height: 0;
			// 	display: block;
			// 	position: absolute;
			// 	top: 50%;
			// 	margin-top: -8rpx;
			//   border-top:	8rpx solid transparent;
			// 	border-bottom: 8rpx solid transparent;
			// 	border-right: 16rpx solid #fff;
			// 	left: 7rpx;
			// }
			
			// .container {
			//   width: 100%;
			//   height: 70rpx; /* 或者根据需要设置具体高度 */
			//   overflow: hidden;
			//   display: -webkit-box;
			//   -webkit-line-clamp: 2;
			//   -webkit-box-orient: vertical;
			// }
			
			// .text {
			//   font-size: 35rpx;
			//   font-weight: bold;
			//   white-space: normal;
			// }

			.parknews-left {
				flex: 1;
				overflow: hidden;
				/*显示文本行数*/
				-webkit-box-orient: vertical;
				.parknews-leftt{
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					/*显示文本行数*/
					-webkit-box-orient: vertical;
					// height: 90rpx; /* 或者根据需要设置具体高度 */
					.parknews-left-title {
						white-space: normal;
						font-size: 35rpx;
						font-weight: bold;
						display: block;
						// height: 94rpx; /* 或者根据需要设置具体高度 */
						letter-spacing: 2rpx;
					}
				}
				
		
				.parknews-left-time {
					color: gray;
					font-size: 25rpx;
					margin-top: 25rpx;
				}
			}
		
			.parknews-right {
				height: 150rpx;
				width: 230rpx;
				min-width: 230rpx; /* 设置最小宽度 */
				flex-shrink: 0;
			}
		}
	}
</style>